<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            width: 700px;
            height: 380px;
            border: 1px solid black;
            border-radius: 1%;
        }

        .c1 {
            color: rgba(0, 0, 0, 0.3);
        }

    </style>
</head>
<body>
<img src="register_logo.gif">
<div class="container">
    <form action="#">
        <table>

            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr>
                <td >通行证用户名:</td>
                <td><input type="text" name="nickName"><font size="0" class="c1">@163.com</font></td>
                    <td >
                       <span  style="width: 300px;height: 200px;border: 1px solid red; color:black;background:#fff2e5;"><img src="error.gif">通行证用户名不能为空，请输入通行证用户名</span>
                    </td>


            </tr>
            <tr>
                <td align="right">登录密码:</td>
                <td><input type="password" name="rePassword" size="25"></td>
                <td>
                     <span  style="width: 300px;height: 200px;border: 1px solid red; color:black;background:#fff2e5;">
                    <img src="error.gif">
                        密码不能为空，请输入密码

                    </span>
                </td>
            </tr>
            <tr>
                <td align="right">重复登录密码:</td>
                <td><input type="password" name="rePassword" size="25"></td>
                <td>
                     <span  style="width: 300px;height: 200px;border: 1px solid red; color:black;background:#fff2e5;">
                    <img src="error.gif">
                       重复密码不能为空，请重复输入密码
                    </span>
                </td>
            </tr>
            <tr></tr>
            <tr></tr>
            <tr >
                <td  align="right">性别:</td>
                <td ><input type="radio" name="gender" value="man" checked><font class="c1">男</font>
                    <input type="radio" name="gender" value="woman"><font class="c1">女</font></td>
            </tr>
            <tr></tr>
            <tr></tr>
            <tr>
                <td align="right">真实姓名:</td>
                <td><input type="text" name="name" size="25"></td>
            </tr>
            <tr>
                <td align="right">昵称:</td>
                <td><input type="text" name="name" value="aaaa" size="25"></td>
                <td>
                    <span class="c2" style="width: 300px;height: 200px;border: 1px solid green; color:black;background: #e6fee4;">
                    <img src="img.png">
                          昵称输入正确
                    </span>
                </td>
            </tr>
            <tr>
                <td align="right">关联手机号:</td>
                <td><input type="phone" name="number" size="25"></td>
                <td rowspan="2">
                    <div style="width: 300px;height: 50px;border: 2px solid #ffd524; color:black; background: #ffffda;">
                       1、手机号码以13, 15, 18开头<br>
                       2、手机号码由11位数字组成
                    </div>

                </td>
            </tr>

            <tr>
                <td>&nbsp;  </td>
                <td> &nbsp;</td>
            </tr>
            <tr>
                <td align="right">保密邮箱:</td>
                <td><input type="text" name="email" size="25"></td>
                <td>
                     <span  style="width: 300px;height: 200px;border: 1px solid red; color:red;background:#fff2e5;">
                    <img src="error.gif">
                        <font color="black">保密邮箱不能为空，请输入保密邮箱</font>
                    </span>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><img src="button.gif"></td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>